<template>
    <a-modal
        :open="open"
        :footer="null"
        :closable="false"
        :width="300"
        :body-style="bodyStyleModal"
        style="top:200px"
        @cancel="onclose"
    >
        <a-input-password v-model:value="wifiPassword" class="inputUserCode" placeholder="请输入wifi密码"></a-input-password>
        <a-divider style="margin: 5px 0;background-color: black"></a-divider>
        <div class="buttonDiv">
            <a-button shape="round" class="addUserBtn" @click="connectWifi" :loading="loading">确定</a-button>
        </div>
    </a-modal>
    <key-board ref="key" :get-key-board-input="getKey" :open="open" @handleOk="connectWifi" @closeKeyBoard="onclose"></key-board>
</template>

<script>
import KeyBoard from "@/components/keyBoard.vue";
import axios from "axios";
import {message} from "ant-design-vue";
import API_BASE_URL from "../../config";
import store from "@/store";

export default {
    name: "wifiPasswordModal",
    components: {KeyBoard},
    props:['getIsConnect'],
    data() {
        return {
            open:false,
            wifiName:'',
            wifiPassword: '',
            bodyStyleModal: ['margin:-20px -24px', 'height:90px'],
            loading:false,
            url:{
                setWifi:`${API_BASE_URL}/set-wifi`,
                // setWifi:`http://localhost:5000/set-wifi`,
            }
        }
    },
    methods: {
        getKey(val) {
            this.wifiPassword = val
        },
        onclose(){
            this.wifiPassword = ''
            this.open = false
            console.log("我执行")
        },
        //wifi连接
        connectWifi() {
            let wifiParam = {
                wifi_name: this.wifiName,
                wifi_pass: this.wifiPassword
            }
            this.loading=true
            axios({
                url: this.url.setWifi,
                method: 'get',
                params: wifiParam
            }).then((res) => {
                console.log(res.data.message)
                if (res.data.message === 'success') {
                    message.success('wifi连接成功')
                    store.commit('setWifiName',{value:wifiParam["wifi_name"]})
                    this.getIsConnect(true)
                    this.loading=false
                    this.onclose()
                } else {
                    message.error('连接失败')
                    this.loading=false
                }
            })
        },
    }
}
</script>

<style scoped>
.inputUserCode {
    border-style: hidden;
    width: 295px;
    font-size: 20px;
}

.buttonDiv {
    display: flex;
    justify-content: center;
    gap: 60px;
}
</style>